<template>
    <div class="app-container">
        <div class="header">
            <div class="left">
                <div class="back-btn" v-if="showBack" @click="onBackClick">
                    <el-icon>
                        <Back />
                    </el-icon>
                </div>{{ timeStr }}
            </div>
            <div class="center">{{ title }}</div>
            <div class="right">
                <div style="margin-right: 15px;">{{ languageStore.currentLanguage === 'zh' ? '中文' : 'English' }}</div>
                <div>账号：{{ userInfoStore.userInfo?.username || '未登录' }}</div>
                <el-icon style="font-size: 20px;margin-left: 10px;" @click="router.push('/settings')">
                    <Tools />
                </el-icon>
                <!-- 新增退出登录按钮 -->
                <el-icon style="font-size: 20px; margin-left: 10px; color: #ff4d4f;" @click="handleLogout">
                    <SwitchButton />
                </el-icon>
            </div>
        </div>
        <div class="content">
            <RouterView />
        </div>
    </div>
</template>
<script setup>
import { RouterView, useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import { useLanguageStore } from '../stores/language'
import { useUserInfoStore } from '../stores/userInfo' // 新增store引入
import { ElMessage, ElMessageBox } from 'element-plus' // 新增消息组件引入

const languageStore = useLanguageStore()
const userInfoStore = useUserInfoStore() // 新增用户信息store
const route = useRoute()
const router = useRouter()
const showBack = computed(() => route.meta.showBack)
const title = computed(() => route.meta.title)
let interId = null
const timeStr = ref('')
const setTimeStr = () => {
    let timeArr = ['日', '一', '二', '三', '四', '五', '六']
    const day = dayjs()
    let timeStr1 = day.format('YYYY-MM-DD')
    let timeStr2 = `星期${timeArr[day.day()]}`
    let timeStr3 = day.format('HH:mm:ss')
    timeStr.value = `${timeStr1} ${timeStr2} ${timeStr3}`
}

const onBackClick = () => {
    router.push('/home')
}
onMounted(() => {
    setTimeStr()
    interId = setInterval(() => {
        setTimeStr()
    }, 1000)
})
onBeforeUnmount(() => {
    clearInterval(interId)
})

// 新增退出登录处理
const handleLogout = () => {
    ElMessageBox.confirm('确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        userInfoStore.clearUserInfo()
        router.replace('/login')
        ElMessage.success('已安全退出')
    })
}
</script>
<style lang="scss" scoped>
.back-btn {
    font-size: 18px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.app-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        display: flex;
        align-items: center;
        padding-right: 20px;
        justify-content: space-between;
        background-color: #272C3C;
        padding: 0 15px;
        color: #FFF;

        &>div {
            width: 33%;

            &:nth-child(1) {
                text-align: left;
                display: flex;
                align-items: center;
            }

            &:nth-child(2) {
                text-align: center;
                font-size: 18px;
                font-weight: bold;
            }

            &:nth-child(3) {
                text-align: right;
                display: flex;
                justify-content: flex-end;
                align-items: center;
            }
        }
    }

    .content {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f5f7fa;

    }
}
</style>